<template>
  <div class="api-test-suite">
    <div class="page-header">
      <h1>🔧 API测试套件</h1>
      <p>综合API接口测试工具，支持多种测试场景</p>
    </div>

    <div class="test-tabs">
      <a-tabs v-model:activeKey="activeTab" type="card" size="large">
        <a-tab-pane key="payment" tab="💳 支付接口测试">
          <div class="test-section">
            <h3>支付API测试</h3>
            <a-form :model="paymentForm" layout="vertical">
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="支付方式">
                    <a-select v-model:value="paymentForm.paymentMethod">
                      <a-select-option value="WXPAY">微信支付</a-select-option>
                      <a-select-option value="ALIPAY">支付宝</a-select-option>
                      <a-select-option value="UNIONPAY">银联支付</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="支付金额">
                    <a-input-number v-model:value="paymentForm.amount" :min="0.01" :precision="2" placeholder="请输入金额" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item label="商户订单号">
                <a-input v-model:value="paymentForm.merchantOrderId" placeholder="自动生成" />
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="testPaymentAPI" :loading="paymentLoading">
                  测试支付接口
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-tab-pane>

        <a-tab-pane key="webhook" tab="🔔 Webhook测试">
          <div class="test-section">
            <h3>Webhook回调测试</h3>
            <a-form :model="webhookForm" layout="vertical">
              <a-form-item label="回调URL">
                <a-input v-model:value="webhookForm.callbackUrl" placeholder="请输入回调URL" />
              </a-form-item>
              <a-form-item label="事件类型">
                <a-select v-model:value="webhookForm.eventType">
                  <a-select-option value="PAYMENT_SUCCESS">支付成功</a-select-option>
                  <a-select-option value="PAYMENT_FAILED">支付失败</a-select-option>
                  <a-select-option value="REFUND_SUCCESS">退款成功</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="testWebhook" :loading="webhookLoading">
                  测试Webhook
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-tab-pane>

        <a-tab-pane key="performance" tab="⚡ 性能测试">
          <div class="test-section">
            <h3>API性能测试</h3>
            <a-form :model="performanceForm" layout="vertical">
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item label="并发数">
                    <a-input-number v-model:value="performanceForm.concurrency" :min="1" :max="100" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="请求次数">
                    <a-input-number v-model:value="performanceForm.requestCount" :min="1" :max="1000" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="测试接口">
                    <a-select v-model:value="performanceForm.apiEndpoint">
                      <a-select-option value="/api/payment/create">创建支付</a-select-option>
                      <a-select-option value="/api/payment/query">查询支付</a-select-option>
                      <a-select-option value="/api/refund/create">创建退款</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item>
                <a-button type="primary" @click="testPerformance" :loading="performanceLoading">
                  开始性能测试
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- 测试结果 -->
    <div class="test-results" v-if="testResults.length > 0">
      <h3>🔍 测试结果</h3>
      <a-table :columns="resultColumns" :data-source="testResults" :pagination="false" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'

const activeTab = ref('payment')
const paymentLoading = ref(false)
const webhookLoading = ref(false)
const performanceLoading = ref(false)
const testResults = ref<any[]>([])

const paymentForm = reactive({
  paymentMethod: 'WXPAY',
  amount: 0.01,
  merchantOrderId: ''
})

const webhookForm = reactive({
  callbackUrl: '',
  eventType: 'PAYMENT_SUCCESS'
})

const performanceForm = reactive({
  concurrency: 10,
  requestCount: 100,
  apiEndpoint: '/api/payment/create'
})

const resultColumns = [
  { title: '测试时间', dataIndex: 'timestamp', key: 'timestamp' },
  { title: '测试类型', dataIndex: 'type', key: 'type' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '耗时(ms)', dataIndex: 'duration', key: 'duration' },
  { title: '响应信息', dataIndex: 'message', key: 'message' }
]

const testPaymentAPI = async () => {
  paymentLoading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    testResults.value.unshift({
      timestamp: new Date().toLocaleString(),
      type: '支付接口测试',
      status: '成功',
      duration: Math.floor(Math.random() * 500) + 100,
      message: `${paymentForm.paymentMethod} 支付测试成功`
    })

    message.success('支付接口测试完成')
  } catch (error) {
    message.error('支付接口测试失败')
  } finally {
    paymentLoading.value = false
  }
}

const testWebhook = async () => {
  webhookLoading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 800))

    testResults.value.unshift({
      timestamp: new Date().toLocaleString(),
      type: 'Webhook测试',
      status: '成功',
      duration: Math.floor(Math.random() * 300) + 50,
      message: `${webhookForm.eventType} 回调测试成功`
    })

    message.success('Webhook测试完成')
  } catch (error) {
    message.error('Webhook测试失败')
  } finally {
    webhookLoading.value = false
  }
}

const testPerformance = async () => {
  performanceLoading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 2000))

    testResults.value.unshift({
      timestamp: new Date().toLocaleString(),
      type: '性能测试',
      status: '成功',
      duration: Math.floor(Math.random() * 1000) + 500,
      message: `并发${performanceForm.concurrency}，请求${performanceForm.requestCount}次`
    })

    message.success('性能测试完成')
  } catch (error) {
    message.error('性能测试失败')
  } finally {
    performanceLoading.value = false
  }
}

onMounted(() => {
  // 生成默认订单号
  paymentForm.merchantOrderId = 'TEST_' + Date.now()
})
</script>

<style scoped>
.api-test-suite {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h1 {
  font-size: 24px;
  color: #333;
  margin: 0;
}

.page-header p {
  color: #666;
  margin: 8px 0 0 0;
}

.test-tabs {
  margin-bottom: 24px;
}

.test-section {
  padding: 24px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 16px;
}

.test-section h3 {
  margin-top: 0;
  color: #333;
}

.test-results {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.test-results h3 {
  margin-top: 0;
  color: #333;
}
</style>